<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>成绩排行图</title>
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入layui js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="../js/echarts.min.js"></script>
    <style>
        .box {
            width: 1300px;
            height: 700px;
        }
    </style>
</head>

<body>
<div class="box"></div>

<script>
    console.log(echarts.version);
    var myCharts = echarts.init(document.querySelector('.box'));
    var arr = [];
    var arr2 = [];
    $.ajax({
        type: "get",
        url: "/studentData/studentdata",
        async: true,
        success: (data) => {
            for (let i = 0; i < data.length; i++) {
                arr[i] = data[i].score
                arr2[i] = data[i].name
            }
            myCharts.setOption({
                color: ['skyblue'],
                xAxis: {
                    type: 'category',
                    data: arr2
                },
                tooltip: {},
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'bar',
                        data: arr,
                    }
                ]
            });
        }
    });
</script>

</body>

</html>